<template>
  <h1>{{ count }}</h1>
  <h1>{{ double }}</h1>
  <button @click="increase">加1</button>
</template>

<script>
import { computed, reactive, ref, toRefs, watch } from 'vue'
export default {
  name: 'Demo',
  setup() {
    const data = reactive({
      count: 0,
      increase: () => {
        data.count++
      },
      double: computed(() => data.count * 2),
    })
    const conComputed = computed(() => data.count * 2)
    const number = ref(0)
    watch(data, (newValue, oldValue) => {
      console.log(data)
      document.title = '更新过后 ' + data.double
    })
    watch(number, (newValue, oldValue) => {
      console.log(number)
    })
    return {
      number,
      conComputed,
      ...toRefs(data)
    }
  },
}
</script>
